<template>
	<div class="_wz_materialExam">
		<template v-for="item,index in ceshiData">
			<Alert>
				第{{index + 1}}题：{{item.question}}<span style="margin:0 0 0 10px;">({{item.source}}分)</span>
				<template slot="desc">
					<div style="padding: 0 10px;line-height: 30px;">
						<p v-if="!!item.optionA">A.{{item.optionA}}</p>
						<p v-if="!!item.optionB">B.{{item.optionB}}</p>
						<p v-if="!!item.optionC">C.{{item.optionC}}</p>
						<p v-if="!!item.optionD">D.{{item.optionD}}</p>
						<p>【正确答案】：{{item.answer}}</p>
						<p>【参考解析】：{{item.explanation}}</p>
					</div>
				</template>
			</Alert>
		</template>
		<!--图片查看-->
		<Modal title="图片查看" v-model="visible">
			<img :src="imgSrc" v-if="visible" style="width: 100%" @error="public.imgDispose" />
		</Modal>
	</div>
</template>
<script>
	export default {
		props: [
			"materialData", 'documentsExam'//课件所有数据
		],//接收来自父组件的数据
		data() {
			return {
				ceshiData: [],
				visible: false,
				imgSrc: "",
				imgList: [],
			}
		},
		beforeCreate() {//beforeCreate创建前状态

		},
		created() {//created创建完毕状态

		},
		beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

		},
		mounted() {//mounted 挂载结束状态
			let that = this;
			//documentsExam == true  资格证考试 查看试题
      //测试加载试题
      //单选 多选 下拉 数据
      that.axios.post(that.apiUrl.webApi + "/educate/materialExam/materialExamQuestionList" ,{materialUuid: that.materialData.id}).then(res => {
        if (!!res) {
          that.ceshiData = res.data.data
        }
      }).catch(err => {
        console.log('失败', err);
      })


		},
		methods: {//执行的方法
			//缩略图查看
			handleView(src) {
				this.imgSrc = src;
				this.visible = true;
			},
		},
		watch: {//监听

		},
		beforeUpdate() {//beforeUpdate 更新前状态

		},
		updated() {//updated 更新完成状态

		},
		beforeDestroy() {//beforeDestroy 销毁前状态

		},
		destroyed() {//destroyed 销毁完成状态

		}
	}
</script>
<style lang="less">
	._wz_materialExam {
		max-width: 1024px;
		margin: auto;

		.demo-upload-list {
			float: left;
			margin: 10px;
			display: block;
			width: 100px;
			height: 132px;
			text-align: center;
			line-height: 60px;
			border: 1px solid transparent;
			border-radius: 4px;
			overflow: hidden;
			background: #fff;
			position: relative;
			box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
		}

		.demo-upload-list img {
			width: 100%;
			height: 100%;
		}

		.demo-upload-list-cover {
			align-items: center;
			display: none;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(0, 0, 0, .6);
		}

		.demo-upload-list:hover .demo-upload-list-cover {

			display: flex;
		}

		.demo-upload-list-cover i {
			display: block;
			margin: auto;
			color: #fff;
			font-size: 40px;
			cursor: pointer;
		}

		._wz_userData {
			width: calc(100% - 100px - 10px);
			float: left;
		}

		._wz_userData div {
			line-height: 33px;
			height: 33px;
		}
	}


</style>
